<template>
  <div class="register">
      <my-head title="注册" :go="false" :ri="null"></my-head>
      <div class="content">
          <table>
              <tr>
                  <td>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-msnui-tel"></use>
                      </svg>
                      <input type="text" placeholder="手机号码" v-model="tel">
                  </td>
              </tr>
              <tr>
                  <td>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                      </svg>
                      <input type="text" placeholder="设置密码" v-model="pwd">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanjing-bi"></use>
                      </svg>
                  </td>
              </tr>
              <tr>
                  <td>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-saoyisao"></use>
                      </svg>
                      <input type="text" placeholder="验证码">
                      <a href="#">获取验证码</a>
                  </td>
              </tr>
              <tr>
                  <td>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode"></use>
                      </svg>
                      <input type="text" placeholder="邀请人手机号码，可不填">
                  </td>
              </tr>
              <tr>
                  <td>

                  </td>
              </tr>
              <tr>
                  <td>
                      <button @click="register">注册</button>
                  </td>
              </tr>
              <tr>
                  <td>
                      注册即表示您已同意<b>《小荷在线服务协议》</b>
                  </td>
              </tr>
              <tr>
                  <td>
                      已有账号?<b v-on:click="goto('login')">马上登录</b>
                  </td>
              </tr>
          </table>
      </div>
  </div>
</template>

<script>
import Head from "@/components/Head";
export default {
  data() {
    return {
        tel:null,
        pwd:null
    };
  },
  components: {
    myHead: Head
  },
  methods:{
      goto(val){
          console.log(val)
          this.$router.push("/login")
      },
      //   注册
      register(){
        if(this.tel!=""&&this.pwd!=""){
            // 设置sessionstorage
            sessionStorage.setItem("tel",this.tel)
            this.$router.push({
                path:"/myhome"
            })
        }
      }
  }
};
</script>

<style scoped lang="less">
.register {
  flex: 1;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    padding: 0.2rem 0.36rem;
    table {
      width: 100%;
      tr {
        td {
          display: flex;
          flex-direction: row;
          padding-bottom: 0.075rem;
          .icon{
            width: 0.17rem;
            height: 0.17rem;
            font-size: 0.17rem;
            margin: 0.195rem 0.13rem;
          }
          input,
          button {
            border: 0;
            outline: none;
            flex: 1;
            font-size: 0.17rem;
            padding: 0.16rem 0;
          }
          button {
            color: #fff;
            background: #ff8b38;
          }
          b {
            color: #ff8b38;
          }
        }
      }
      tr:nth-child(1),
      tr:nth-child(2),
      tr:nth-child(3),
      tr:nth-child(4) {
        td {
          border-bottom: 0.02rem #ececec solid;
        }
      }
      tr:nth-child(3),tr:nth-child(4){
          td{
              input{
                  font-size: 0.14rem;
              }
              a{
                  font-size: 0.14rem;
                  line-height: 0.56rem;
                  color: #ff8b38;
              }
          }
      }
      tr:nth-child(5) {
        td {
          height: 0.485rem;
        }
      }
      tr:nth-child(7),
      tr:nth-child(8) {
        td {
          display: block;
          font-size: 0.12rem;
          text-align: center;
          padding-top: 0.075rem;
        }
      }
    }
  }
}
</style>
